<template>
  <view>
    <!-- <my-search bgColor="pink" :bdRadius="10" /> -->
    
    <!-- 方法一：通过在组件my-search中的click事件中使用$emit('myClick')触发 -->
    <my-search @myClick="gotoSearch" />
    
    <!-- 方法二：也可通过click事件加原生事件属性 native 触发  -->
    <!-- <my-search @click.native="gotoSearch" /> -->
    
    <!-- 商品分类滚动区域容器 -->
    <view class="scroll-view-container">
      <!-- 左侧的滚动区域 -->
      <scroll-view :scroll-y="true" class="left-scroll-view" :style="{height: wh + 'px'}">
        <block v-for="(item, i) in cateList" :key="i">
          <view :class="['left-scroll-view-item', i === active ? 'active' : '']" :data-index="i"
            @click="changeActiveStyle">{{item.cat_name}}</view>
        </block>
      </scroll-view>
      <!-- 右侧的滚动区域 -->
      <!-- scroll-view组件的scroll-top属性表示离顶部的距离，每次点击左边的一级分类后，右侧的scroll-top重置为0 -->
      <scroll-view scroll-y :scroll-top="scrollTop" class="right-scroll-view" :style="{height: wh + 'px'}">
        <!-- 二级分类标题区域 -->
        <view v-for="(item2, i2) in cateLevel2" :key="i2" class="cate-lv2">
          <view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
          <!-- 当前二分类下的三级分类图片文字盒子区域 -->
          <view class="cate-lv3-list">
            <view v-for="(item3, i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)" class="cate-lv3-item">
              <!-- 图片 -->
              <image :src="item3.cat_icon.replace('api-ugo-dev.itheima.net','api-hmugo-web.itheima.net')" />
              <!-- 分类名称文字 -->
              <text>{{item3.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  // 导入定义的混入：用于设置每次进入该页面，都会刷新显示 tabBar 栏购物车图标右上角的圆形数字徽标
  import mixins from '@/mixins/mixins.js'
  export default {
    mixins: [mixins],  // 使用上面导入的混入
    data() {
      return {
        // 小程序可用窗口的高度（减去顶部 navigationBar），用于赋值给 scroll-view 组件的 height 属性，超过窗口可用高度，才可滚动
        wh: 0,
        // 存储分类列表
        cateList: [],
        // 存储当前点击的左侧分类的索引
        active: 0,
        // 存储二级分类列表
        cateLevel2: [],
        // 设置右侧二级分类滚动框离顶部的距离为0
        scrollTop: 0
      };
    },
    onLoad() {
      /* 获取设备小程序窗口的可用高度（减去顶部 navigationBar），screenHeight是屏幕总高度 */
      const wh = uni.getSystemInfoSync().windowHeight
      this.wh = wh - 50  // 要减去顶部搜索栏50px的高度，否则左右两个scroll-view底部会被裁掉50px的高度显示不完整
      // console.log(wh)

      this.getCateList()
    },
    methods: {
      // 获取分类列表函数
      async getCateList() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/categories')
        if (res.meta.status !== 200) return uni.$showMsg()
        this.cateList = res.message
        this.cateLevel2 = res.message[0].children
      },
      // 点击当前左侧分类盒子的处理函数
      changeActiveStyle(event) {
        // 将当前点击的分类盒子的data-index值赋值给this.active，设置当前样式
        this.active = event.target.dataset.index
        // 将当前点击的分类的子分类children赋值给 this.cateLevel2
        this.cateLevel2 = this.cateList[event.target.dataset.index].children
        // 每次点击左侧一级分类后，重置右侧分类框离顶部为0，否则切换其它一级分类时，不会重置离顶部距离
        this.scrollTop = this.scrollTop === 0 ? '0' : 0  // 必须判断，不能每次赋相同的值，否则页面不会重新渲染
      },
      // 点击三级分类，跳转到 goods_list 分类列表页
      gotoGoodsList(cate) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid=' + cate.cat_id
        })
      },
      // 搜索组件单击事件处理函数
      gotoSearch(){
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }
      
    }
  }
</script>

<style lang="scss">
  .scroll-view-container {
    display: flex;

    .left-scroll-view {
      width: 120px;

      .left-scroll-view-item {
        background-color: #F7F7F7;
        line-height: 60px;
        font-size: 12px;
        text-align: center;

        &.active {
          background-color: #FFFFFF;
          position: relative;

          &::before {
            content: '';
            display: block;
            width: 3px;
            height: 30px;
            background-color: #C00000;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }

    .right-scroll-view {
      .cate-lv2-title {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        padding: 15px 0;
      }

      .cate-lv3-list {
        display: flex;
        flex-wrap: wrap;
        .cate-lv3-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 33.33%; /* 每行显示三个 item */
          margin-bottom: 10px;
          image {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
          }
          text {
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
